Webbappmanifest: Din guide till konfiguration av progressiva webbappar

Webbappmanifestet är en JSON-fil som tillhandahåller information om din webbapplikation till webbläsare och operativsystem. Denna information används när appen installeras på en användares enhet och definierar hur den visas och beter sig som en progressiv webbapp (PWA). Tänk på det som ritningen som förvandlar din webbplats till en installerbar, applikationsliknande upplevelse. Ett välkonfigurerat manifest är avgörande för användarengagemang och upptäckbarhet.

Vad är en progressiv webbapp (PWA)?

Innan vi dyker ner i webbappmanifestet, låt oss repetera vad en PWA är. PWAs är webbapplikationer som erbjuder en applikationsliknande upplevelse för användare. De är:

• Tillförlitliga: Laddas direkt och fungerar offline eller på nätverk av låg kvalitet, tack vare servicearbetare.
• Snabba: Svarar snabbt på användarinteraktioner med mjuka animationer och ingen hackig rullning.
• Engagerande: Erbjuder en uppslukande användarupplevelse med funktioner som push-meddelanden och möjligheten att installeras på startskärmen.

Webbappmanifestets roll

Webbappmanifestet är hörnstenen i en PWA. Det tillhandahåller nödvändig information för webbläsare att:

• Installera PWA: Det gör det möjligt för användare att installera webbappen på sina enheter och lägga till den på sin startskärm eller appstartare.
• Visa PWA korrekt: Det definierar appens namn, ikoner, temafärg och andra visuella aspekter.
• Kontrollera PWA:s beteende: Det anger hur appen ska startas (t.ex. i helskärmsläge eller som ett fristående fönster) och hur den ska integreras med operativsystemet.

Skapa din `manifest.json`-fil

Webbappmanifestet är en JSON-fil, vanligtvis namngiven `manifest.json`. Den bör placeras i rotkatalogen för din webbapplikation. Här är ett grundläggande exempel:

            {
  "name": "Min fantastiska PWA",
  "short_name": "Fantastisk PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

Låt oss bryta ner var och en av dessa egenskaper:

`name`

Det fullständiga namnet på din webbapplikation. Det här namnet visas för användarna när de uppmanas att installera appen och i appstartaren.

Exempel:

            "name": "Global News App"
            

              
                Copy
              
            
          

`short_name`

En kortare version av din apps namn, används när det är begränsat utrymme, till exempel på startskärmen eller i appstartaren. Håll det koncist.

Exempel:

            "short_name": "Global News"
            

              
                Copy
              
            
          

`start_url`

Den URL som appen ska läsa in när den startas. Det är vanligtvis startsidan för din webbapplikation, men det kan vara en specifik landningssida.

Exempel:

            "start_url": "/"
            

              
                Copy
              
            
          

Du kan också använda en URL med frågeparametrar för att spåra hur användare startar din PWA:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Definierar hur appen ska visas när den startas. Det finns flera alternativ:

• `standalone`: Appen öppnas i sitt eget toppfönster, utan webbläsarens UI-element som adressfältet.
• `fullscreen`: Appen tar upp hela skärmen och döljer även statusfältet.
• `minimal-ui`: Liknar `standalone`, men tillhandahåller ett minimalt webbläsar-UI, till exempel en bakåtknapp och en uppdateringsknapp.
• `browser`: Appen öppnas i en vanlig webbläsarflik eller ett fönster.

Rekommendation: `standalone` är i allmänhet det föredragna alternativet för PWAs.

Exempel:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Bakgrundsfärgen på appens välkomstskärm när den startas. Detta är viktigt för att tillhandahålla en sömlös övergång mellan appikonen och appens innehåll.

Exempel:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

Temafärgen som används för att styla appens UI, till exempel statusfältet på Android. Denna färg bör matcha din apps varumärke.

Exempel:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

En matris av objekt, som var och en representerar en ikon för appen. Du bör tillhandahålla flera ikoner i olika storlekar för att säkerställa att appen ser bra ut på olika enheter och upplösningar.

Egenskaper för varje ikon:

• `src`: URL:en för ikonbilden.
• `sizes`: Ikonens dimensioner i pixlar (t.ex. "192x192").
• `type`: MIME-typen för ikonbilden (t.ex. "image/png").

Rekommenderade ikonstorlekar:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

Exempel:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

Ytterligare manifestegenskaper

Även om egenskaperna ovan är de vanligaste, stöder webbappmanifestet många andra alternativ för att konfigurera din PWA:

`id`

En unik identifierare för din PWA. Detta är viktigt för att förhindra konflikter om du har flera PWAs med samma namn.

Exempel:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Definierar appens navigeringsomfattning. Detta avgör vilka URL:er på din webbplats som anses vara en del av PWA. Om användaren navigerar utanför omfattningen öppnas appen i en vanlig webbläsarflik.

Exempel:

            "scope": "/app/"
            

              
                Copy
              
            
          

I det här exemplet kommer endast URL:er som börjar med `/app/` att betraktas som en del av PWA.

`orientation`

Anger den önskade skärmorienteringen för appen. Alternativen inkluderar `portrait`, `landscape`, `any` och mer.

Exempel:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

En matris av objekt som definierar relaterade inbyggda applikationer. Detta gör att du kan marknadsföra dina inbyggda appar till användare som redan har installerat din PWA.

Exempel:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

Detta exempel indikerar att det finns en relaterad inbyggd app på Google Play Butik med ID:t `com.example.myapp`.

`prefer_related_applications`

Ett booleskt värde som anger om användaren ska uppmanas att installera den relaterade inbyggda applikationen istället för PWA.

Exempel:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

En matris med strängar som representerar appens kategorier. Detta kan hjälpa användare att hitta din app i appbutiker eller sökresultat.

Exempel:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

Definierar en lista med genvägar som användare kan komma åt från appikonen på sin startskärm. Detta gör att användare snabbt kan utföra vanliga uppgifter i appen.

Exempel:

            "shortcuts": [
  {
    "name": "Senaste nyheterna",
    "short_name": "Nyheter",
    "description": "Läs de senaste nyhetsartiklarna",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Länka manifestet till din webbapp

När du har skapat din `manifest.json`-fil måste du länka den till din webbapplikation genom att lägga till en ``-tagg i ``-avsnittet i din HTML:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

Validera ditt manifest

Det är viktigt att validera din `manifest.json`-fil för att säkerställa att den är korrekt formaterad och innehåller alla nödvändiga egenskaper. Du kan använda onlineverktyg som JSONLint eller Chrome DevTools för att validera ditt manifest.

Testa din PWA

Efter att ha skapat och länkat ditt manifest bör du testa din PWA i olika webbläsare och enheter för att säkerställa att den fungerar som förväntat. Använd Chrome DevTools (Application -> Manifest) för att inspektera ditt manifest och diagnostisera eventuella problem.

Bästa praxis för konfiguration av webbappmanifest

Här är några bästa praxis att tänka på när du konfigurerar ditt webbappmanifest:

• Tillhandahåll alla obligatoriska egenskaper: Se till att du har inkluderat alla väsentliga egenskaper, till exempel `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` och `icons`.
• Använd lämpliga ikonstorlekar: Tillhandahåll flera ikoner i olika storlekar för att stödja olika enheter och upplösningar.
• Välj rätt visningsläge: Välj det `display`-läge som bäst passar din apps användarupplevelse. `standalone` är i allmänhet det föredragna alternativet.
• Validera ditt manifest: Validera alltid din `manifest.json`-fil för att säkerställa att den är korrekt formaterad.
• Testa din PWA: Testa din PWA i olika webbläsare och enheter för att säkerställa att den fungerar som förväntat.
• Optimera för SEO: Använd relevanta nyckelord i ditt `name`, `short_name` och `description` för att förbättra din apps upptäckbarhet.
• Överväg lokalisering: Om din app riktar sig till en global publik bör du överväga att tillhandahålla lokaliserade versioner av ditt manifest med olika namn, beskrivningar och ikoner för olika språk.

Exempel på välkonfigurerade webbappmanifest

Här är några exempel på välkonfigurerade webbappmanifest från populära PWAs:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite är ett snabbare, datavänligt sätt att se vad som händer i världen.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Beställ dina favoritdrycker och mat från Starbucks med appen.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Beställ nu",
      "short_name": "Beställ",
      "description": "Starta en ny beställning",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

Framtiden för webbappmanifest

Webbappmanifestet är en standard i utveckling, med nya funktioner och möjligheter som läggs till över tid. Håll koll på de senaste uppdateringarna och rekommendationerna från W3C för att säkerställa att dina PWAs drar full nytta av den senaste tekniken.

Slutsats

Webbappmanifestet är en viktig komponent i alla PWAs. Genom att konfigurera ditt manifest korrekt kan du erbjuda en sömlös och engagerande användarupplevelse, vilket gör att din webbapp känns som en inbyggd applikation. Den här guiden har gett en omfattande översikt över webbappmanifestet, inklusive dess egenskaper, bästa praxis och exempel. Genom att följa dessa riktlinjer kan du låsa upp den fulla potentialen i dina PWAs och leverera en överlägsen användarupplevelse till dina användare runt om i världen.

Omfamna kraften i webbappmanifestet och förvandla dina webbplatser till installerbara, applikationsliknande upplevelser som gläder användarna och driver engagemang.